<template>
    <div class="listView">
        <!-- 歌单 -->
        <listview-top :playlist="state.playlist"></listview-top>
        <!-- 播放列表 -->
        <play-list :playlist="state.playlist"></play-list>
    </div>
</template>

<script>
import listviewTop from '@/components/musiclist/Children/listviewTop.vue'
import playList from '@/components/musiclist/Children/playList.vue'
import {getPlaylistDetail} from '@/api/index'
import {onMounted, reactive} from 'vue'
import {useRoute} from 'vue-router'
import store from '@/store/index.js'
    export default {
        name: "ListView",
        components: {
            listviewTop,
            playList
        },
        setup() {
            const route = useRoute()
            let state = reactive({
                list:[], 
                playlist:{
                    creator:{},
                    tracks:{}
                }
            })
            onMounted(async () => {
                //接收传过来的 id
                let id = route.query.id;
                // console.log(route)
                let result = await getPlaylistDetail(id);
                state.playlist = result.data.playlist;
                //把播放的数据传给 全局 store
                store.commit('setPlaylist',state.playlist.tracks)
            
                console.log(state.playlist.tracks)
            })
            return {
                state,
            }
        }
    }
</script>

<style lang="less" scoped>

</style>